import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, message, Input, Form, Select, Switch} from 'antd';

const FormItem = Form.Item;
const mapStateToProps = (state: any) => ({
  basedata: state.basedata,
  goodType: state.goodType,
});
class AddModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();

  constructor(props: any) {
    super(props);
    this.state = {
      brandOptions:[],
    };
  }
  componentDidUpdate(prevProps: any) {
    const { modalVisible, record, isAdd } = this.props
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      this.formRef && this.formRef.current?.setFieldsValue({
        ...record,
        isShow: isAdd ?  true  :  record.isShow == 1 ? true  : false,
      })
    }
  }
  componentWillMount() {
    this.props.dispatch({
      type: 'basedata/brandFetch',
      callback: (res:any) => {
        this.setState({ 
           brandOptions: res?.data?.map((item:any)=>{
            return {
              label: item.brandName,
              value: item.brandCode
            }
           }),
        });
       }
    })
  }
  submitForm = () => {
    this.formRef.current?.submit();
  };
  
  ok = (values: any) => {
    const { dispatch,isAdd, record } = this.props;
    let params = {};
    if(isAdd){
      params = {
        ...values,
        brandId: values.brandId.value,
        brandName:  values.brandId.label,
        isShow: values.isShow? 1 : 0,
      }
    }else {
      params = {
        ...values,
        brandId: values.brandId.value,
        brandName:  values.brandId.label,
        isShow: values.isShow? 1 : 0,
        sid: record.sid,
      }
    }
    dispatch({
      type: 'goodType/postObjWithRes',
      payload: {
        url: isAdd ? '/optshop/base/goodstype/save' : '/optshop/base/goodstype/update',
        ...params
      },
      callback: (response: any) => {
        if (response.statusCode === '0') {
          this.close();
          isAdd ? message.success('新增成功') : message.success('编辑成功');
        }
      },
    });
  };
  
  close = () => {
    const { closeModal } = this.props;
    closeModal();
    this.formRef.current?.resetFields();
  };

  render() {
    const { modalVisible, loading, isAdd,} = this.props;
    const { brandOptions} = this.state;
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>
          取消
        </Button>
        <Button size="small" loading={loading} onClick={this.submitForm} type="primary">
          保存
        </Button>
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
        md: { span: 16 },
      },
    };
    return (
      <Modal
        style={{ top: 20 }}
        footer={footer}
        title={isAdd ? "创建商品类型" : "编辑商品类型"}
        visible={modalVisible}
        onCancel={this.close}
      >
        <Form style={{ marginTop: 12 }} ref={this.formRef} onFinish={this.ok} 
        initialValues={{
          ifused: true}}
        >
          <FormItem
            {...formItemLayout}
            label="品牌"
            name="brandId"
            rules={[{ required: true, message: '请选择品牌' }]}
          >
            <Select 
            placeholder="请选择品牌"
            disabled={!isAdd}
            getPopupContainer={triggerNode => triggerNode.parentNode} 
            options={brandOptions}
            labelInValue />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="类型名称"
            name="goodsTypeName"
            rules={[{ required: true, message: '请输入类型名称' }]}
          >
            <Input placeholder="请输入类型名称" maxLength={40}/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="类型编码"
            name="goodsTypeId"
            rules={[{ required: true, message: '请输入类型编码' }]}
          >
            <Input placeholder="请输入类型编码" maxLength={20} disabled={!isAdd}/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="排序"
            name="orderBy"
            rules={[{ required: false, message: '请输入序号' }]}
          >
            <Input placeholder="请输入序号" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="是否显示"
            name="isShow"
            rules={[{ required: true, message: '请选择是否显示' }]}
            valuePropName="checked"
          >
             <Switch />
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(AddModal);
